<template>
  <PageCard title="命名风格转换工具">
    <n-space vertical size="large">
      <n-input
          v-model:value="inputValue"
          type="text"
          size="large"
          placeholder="请输入要转换的文本"
          clearable
      />

      <n-grid :x-gap="12" :y-gap="12" :cols="isMobile ? 1 : 3">
        <n-gi>
          <n-card title="下划线命名" embedded class="text-center">
            <n-space vertical>
              <n-button block @click="toUpper(true)">SNAKE_CASE</n-button>
              <n-button block @click="toLower(true)">snake_case</n-button>
            </n-space>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card title="驼峰命名" embedded class="text-center">
            <n-space vertical>
              <n-button block @click="toCamel(true)">UpperCamel</n-button>
              <n-button block @click="toCamel(false)">lowerCamel</n-button>
            </n-space>
          </n-card>
        </n-gi>
        <n-gi>
          <n-card title="无下划线" embedded class="text-center">
            <n-space vertical>
              <n-button block @click="toUpper(false)">UPPERCASE</n-button>
              <n-button block @click="toLower(false)">lowercase</n-button>
            </n-space>
          </n-card>
        </n-gi>
      </n-grid>

      <n-input
          v-model:value="resultValue"
          type="text"
          size="large"
          placeholder="转换后的文本"
          readonly
      />
    </n-space>
    <n-divider />
    <UsageGuide
      :title="usageGuideConfig.title"
      :steps="usageGuideConfig.steps"
      :tips="usageGuideConfig.tips"
      :example="usageGuideConfig.example"
    />
  </PageCard>
</template>

<script setup lang="ts">
import {ref, computed} from 'vue';
import PageCard from "@/components/PageCard.vue";
import UsageGuide from "@/components/UsageGuide.vue";
import { useBreakpoint } from '@/utils/responsive-helper';

const { isMobile } = useBreakpoint();
const inputValue = ref('hello_world_huahua');
const resultValue = ref('');

// UsageGuide configuration
const usageGuideConfig = {
  title: '使用说明',
  steps: [
    '在输入框中输入需要转换的文本',
    '选择目标命名风格（支持多种格式）',
    '转换结果会自动显示在下方'
  ],
  tips: [
    '支持下划线、驼峰、大小写等多种命名风格转换',
    '自动识别输入文本的格式',
    '适用于变量名、函数名、常量名等编程场景'
  ],
  example: '输入 hello_world 可转换为 HelloWorld、helloWorld、HELLO_WORLD 等格式'
};

const toUpper = (retainUnderscore: boolean) => {
  if (retainUnderscore) {
    resultValue.value = inputValue.value.toUpperCase();
  } else {
    resultValue.value = inputValue.value.replace(/_/g, "").toUpperCase();
  }
};

const toLower = (retainUnderscore: boolean) => {
  if (retainUnderscore) {
    resultValue.value = inputValue.value.toLowerCase();
  } else {
    resultValue.value = inputValue.value.replace(/_/g, "").toLowerCase();
  }
};

const toCamel = (isUpper: boolean) => {
  let parts = inputValue.value.split("_");
  let result = parts.map((part, index) => {
    if (part === '') return '';
    if (!isUpper && index === 0) {
      return part.charAt(0).toLowerCase() + part.slice(1).toLowerCase();
    }
    return part.charAt(0).toUpperCase() + part.slice(1).toLowerCase();
  });
  resultValue.value = result.join("");
};
</script>

<style lang="less" scoped>
</style>
